<template>
  <el-dialog :visible.sync="dialogVisible" :fullscreen="true">
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>工厂代号</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="suppliermodelInJson.Code"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>工厂名称</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="suppliermodelInJson.Name"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>业务员</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <UserSelector v-model="suppliermodelInJson.Sales"/>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>电话</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="suppliermodelInJson.Tel"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>地址</span>
      </el-col>
      <el-col :span="3" class="el-input-large-c">
        <el-input v-model="suppliermodelInJson.Address"></el-input>
      </el-col>
    </el-row>
    <div>
      <SupplierMemberGridEditor ref="smg" :editable="detailEditing" :rowData="currentMemberDetail"/>
    </div>
    <div
      slot="title"
      style="border-bottom: 1px dashed #dcdfe6;font-size: larger;padding-bottom: 10px;"
    >
      <span>数据管理</span>
      <hr style="border:1 dashed " width="100%" color="#DCDFE6" size="1">

      <div>
        <el-button-group>
          <el-button size="mini" :disabled="detailEditing" type="primary" @click="onSubmit">保存</el-button>
          <el-button size="mini" :disabled="delDisable" @click="onDelete">删除</el-button>
        </el-button-group>
        <el-button-group>
          <el-button
            size="mini"
            :disabled="!suppliermodelInJson.AutoId||detailEditing"
            @click="function(){detailEditing=true}"
          >行编辑</el-button>
          <el-button size="mini" :disabled="!detailEditing" @click="pickerVisible = true">增行</el-button>
          <el-button size="mini" :disabled="!detailEditing" @click="rmRow">删行</el-button>
          <el-button
            size="mini"
            :disabled="!detailEditing"
            @click="function(){detailEditing=false}"
          >取消</el-button>
          <el-button
            size="mini"
            :disabled="!detailEditing||currentMemberDetail.length===0"
            @click="onDetailSubmit"
          >保存明细</el-button>
        </el-button-group>
        <el-button-group>
          <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
        </el-button-group>
      </div>
    </div>
    <div slot="footer" style="border-top: 1px dashed #dcdfe6;font-size: larger;padding-top: 10px;"></div>
    <el-dialog :visible.sync="pickerVisible" :modal="false">
      <UserPicker :multiple="true" :autoset="true" @confirm="addRow" @ignore="pickerVisible=false"/>
    </el-dialog>
  </el-dialog>
</template>
<script>
import UserSelector from '@/components/Selector/UserSelector.vue'
import SupplierMemberGridEditor from '@/components/GridEditor/SupplierMemberGridEditor.vue'
import UserPicker from '@/components/DataPicker/UserPicker.vue'

import { delSupplier, setSupplier, setMember, listMember } from '@/api/supplier'
import { Model } from 'vue-property-decorator'

export default {
  components: {
    UserSelector,
    UserPicker,
    SupplierMemberGridEditor
  },
  data() {
    return {
      dialogVisible: false,
      pickerVisible: false,
      suppliermodelInJson: {},
      currentMemberDetail: [],
      detailEditing: false
    }
  },
  computed: {
    delDisable: function() {
      return (
        this.suppliermodelInJson.AutoId === undefined ||
        this.suppliermodelInJson.AutoId === 0 ||
        this.detailEditing
      )
    }
  },
  props: { suppliermodel: Object },
  watch: {
    suppliermodel: function(value) {
      this.suppliermodelInJson = value
      if (this.suppliermodelInJson && this.suppliermodelInJson.AutoId > 0) {
        listMember(this.suppliermodelInJson.AutoId)
          .then(response => {
            if (response.Result === 0) {
              this.currentMemberDetail = response.Data
            } else {
              this.$alert(response.Message, '获取数据失败')
            }
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.currentMemberDetail = []
      }
    }
  },
  methods: {
    onSubmit() {
      setSupplier(this.suppliermodelInJson)
        .then(response => {
          if (response.Result === 0) {
            this.suppliermodelInJson = response.Data
            this.$message('保存成功')
            this.$emit('supplierSaveComplete', this.suppliermodelInJson)
          } else {
            this.$alert(response.Message, '失败')
          }
        })
        .catch(error => {
          // this.$alert(error, '错误')
        })
    },
    onDetailSubmit() {
      setMember(
        this.suppliermodelInJson.AutoId,
        JSON.stringify(this.currentMemberDetail)
      )
        .then(response => {
          if (response.Result === 0) {
            this.currentMemberDetail = response.Data
            this.$message('保存成功')
            this.$emit('memberSaveComplete', this.currentMemberDetail)
          } else {
            this.$alert(response.Message, '失败')
          }
        })
        .catch(error => {
          // this.$alert(error, '错误')
        })
    },
    onDelete() {
      delSupplier(this.suppliermodelInJson)
        .then(response => {
          if (response.Result === 0) {
            this.$message('删除成功')
            this.dialogVisible = false
            this.$emit('supplierDelComplete', this.suppliermodelInJson.AutoId)
            this.suppliermodelInJson = {}
          } else {
            this.$alert(response.Message, '失败')
          }
        })
        .catch(error => {
          // this.$alert(error, '错误')
        })
    },
    addRow(users) {
      for (let midx in users) {
        let minTmpid = 0
        let skip = false
        for (let idx in this.currentMemberDetail) {
          if (
            this.currentMemberDetail[idx].minTmpid &&
            this.currentMemberDetail[idx].minTmpid < minTmpid
          ) {
            minTmpid = this.currentMemberDetail[idx].minTmpid
          }
          if (this.currentMemberDetail[idx].User === users[midx].AutoId) {
            this.$message('用户=' + users[midx].Name + '已存在')
            skip = true
            break
          }
        }
        if (skip) {
          continue
        }
        this.currentMemberDetail.push({
          AutoId: 0,
          minTmpid: minTmpid - 1,
          Supplier: this.suppliermodelInJson.AutoId,
          User: users[midx].AutoId,
          Code: users[midx].Code,
          Name: users[midx].Name
        })
      }
      this.pickerVisible = false
    },
    rmRow() {
      const selectedData = this.$refs.smg.getSelected()
      console.log(selectedData)
      if (selectedData.length === 0) {
        this.$message('请先选中需要删除的行')
        return
      }
      this.$confirm(
        '将会删除' + selectedData.length + '笔记录, 是否继续?',
        '提示',
        { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
      )
        .then(() => {
          for (let idx in selectedData) {
            for (let rIdx in this.currentMemberDetail) {
              if (
                (selectedData[idx].minTmpid &&
                  this.currentMemberDetail[rIdx].AutoId) ||
                selectedData[idx].AutoId ===
                  this.currentMemberDetail[rIdx].AutoId
              ) {
                this.currentMemberDetail.splice(rIdx, 1)
                break
              }
            }
            console.log(this.currentMemberDetail)
          }
        })
        .catch(error => {})
    }
  }
}
</script>

<style>
.el-span-c {
  padding: 5px;
  height: 40px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}
.el-input-normal-c {
  width: 300px;
  height: 40px;
  text-align: left;
}
.el-input-large-c {
  width: 500px;
  height: 40px;
  text-align: left;
}
.el-low-c {
  height: 40px;
  margin-bottom: 15px;
  text-align: left;
}
</style>